<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Frame Embed Page</title>
        
        <!-- The stylesheet -->
        <link href="{{bootstrap_css}}" rel="stylesheet">
        <link href="{{framewarp_css}}" rel="stylesheet">
        <link href="{{utils_css}}" rel="stylesheet">
        <link href="{{cloud_css}}" rel="stylesheet">

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    
    <body class="framePage">
        <form id="delete" action="#" method="POST">
            <input type="hidden" name="post_id" id="post_id" value="0">
        </form>
        {% for post in posts %}
        {% if post.can_see %}
        <div class="alert alert-block alert-info fade in" id="{{post.id}}">
            <div class="container-fluid">
                <div class="row-fluid">
                    <div class = "span11">
                        <a href="#" onClick="frame.src = 'post.html/'+this.id+'&ret='+toHex(parent.document.getElementById('main_frame').src)+'/';"
                        id="{{post.template}}?pid={{post.id}}">
                            <h4 class="alert-heading">{{post.title}}</h4>
                        </a>
                        <p>{{post.description}}</p>
                    </div>
                    <div class ="span1">
                        <h1 >&nbsp;&nbsp;{{post.priority}}</h1>
                        {% if post.can_delete %}
                        <a href="javascript:finish({{post.id}});">&#10003;</a>
                        <div class="close" onclick="submit({{post.id}});">&times;</div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
        {% endfor %}
        <script src="{{jquery_js}}"></script>
        <script src="{{bootstrap_js}}"></script>
        <script src="{{japp_js}}"></script>
        <script src="{{utils_js}}"></script>
        <script src="{{framewarp_js}}"></script>
        <script src="{{cloud_js}}"></script>
        <script>
        var frame = parent.document.getElementById('main_frame');
        function submit(post_id){
            var form = document.getElementById('delete');
            var pid = document.getElementById('post_id');
            pid.value = post_id;
            form.submit()
        }
        function finish(pid){
            $.ajax({url : '/finish/' + pid.toString()}).done(function() {
                $('#' + pid.toString()).removeClass("alert-info");
                $('#' + pid.toString()).addClass("alert-success");
            });
        }
        </script>
    </body>
</html>